<template>
	<uv-popup :closeOnClickOverlay="false" mode="bottom" ref="popup" border-radius="20">
		<view class="boxPopup">
			<view class="title">选择微信头像及昵称</view>

			<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<view class="z-flex z-row-center " style="margin-bottom: 30rpx;">
					<uv-avatar :src="avatarUrl" size="80"></uv-avatar>
				</view>
			</button>
			<input type="nickname" class="my_input" placeholder="请输入昵称" @change="onChangeNickName" />
			<view class="z-flex z-row-center" style="margin-top: 30rpx;">
				<view class="button_wrap" style="margin-right: 20rpx;">
					<uv-button @click="show=false" plain type="info">取消</uv-button>
				</view>
				<view class="button_wrap">
					<uv-button @click="getInformationNew" type="success">确定</uv-button>
				</view>
			</view>
			<view class="" style="height: 40rpx;">

			</view>
		</view>
	</uv-popup>
</template>

<script>
	import {
		getToken,
		updateMember
	} from "@/api/login/index.js"
	import {
		setUserInfo,
	} from "@/utils/storage.js"
	import {
		queryMemberInfo,

	} from "@/api/mine/index.js"
	import {
		SERVER
	} from "@/utils/config.js"
	export default {
		name: "AgreementSign",
		props: {},
		data() {
			return {
				show: false,
				avatarUrl: "",
				nickName: "",
				userInfo: {
					avatarUrl: "",
					nickName: "",
				},
			}
		},
		onLoad() {},
		methods: {
			open() {
				this.$refs.popup.open();
			},
			onChooseAvatar(e) {
				this.$toast.loading()
				this.avatarUrl = e.detail.avatarUrl
				this.userInfo.avatarUrl = e.detail.avatarUrl
				// 这里的头像是临时图片路径，保存到oss
				console.log(SERVER + '/fileController/uploadFile')
				uni.uploadFile({
					url: SERVER + '/fileController/uploadFile',
					filePath: this.avatarUrl,
					name: 'file',
					header: {
						'content-type': 'multipart/form-data',
					},
					success: uploadFileRes => {
						this.userInfo.avatarUrl = JSON.parse(uploadFileRes.data).data;
						this.avatarUrl = JSON.parse(uploadFileRes.data).data;
					},
					fail: (error) => {
						console.log(error, "error")
						this.$toast.tip("头像上传失败")
					},
					complete: () => {
						this.$toast.hideLoading()
					}
				});
			},
			onChangeNickName(e) {
				console.log(e)
				this.nickName = e.detail.value
				this.userInfo.nickName = e.detail.value
			},
			getInformationNew() {
				if (this.avatarUrl ==
					'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0' ||
					this.avatarUrl == ''
				) {
					this.$toast.tip('请选择头像')
					return false;
				}
				if (this.nickName == '') {
					this.$toast.tip('请输入昵称')

					return false;
				}
				updateMember({
					avatarUrl: this.avatarUrl,
					nickName: this.nickName,
				}).then(res => {
					this.queryMemberInfo()
				});

			},
			queryMemberInfo() {
				queryMemberInfo()
					.then(res => {
						console.log(res, '用户数据');
						if (res.data) {
							setUserInfo(res.data)
						}
					})
					.finally(() => {
						this.show = false
						this.$emit("confirm")
					});
			}
		},

	}
</script>

<style lang="scss" scoped>
	.boxPopup {
		width: 100%;

		padding: 0 30rpx;
		box-sizing: border-box;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);


		.text {
			font-size: 24rpx;

		}

		.title {
			font-size: 36rpx;
			font-weight: bold;
			line-height: 120rpx;
			color: #000;
		}
	}

	.avatar-wrapper {
		// border: 0px solid #fff;
		outline: none;
		background: none;
	}

	// 边框样式
	.avatar-wrapper::after {
		border: 0;
	}

	.avatar {
		width: 80px;
		height: 80px;
		border-radius: 50%;
	}

	.weui-input {
		margin: 50px auto;

	}

	.my_input {
		margin: 20rpx;
		font-size: 30rpx;
	}
	.button_wrap{
		width: 200rpx;
	}
</style>